<!DOCTYPE html>
<html>
<head>
    <title>商弦站牌生成器</title>
    <link href="../../Seniva/stylesheet.css" rel="stylesheet">
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/canvg/3.0.7/umd.min.js"></script>
    <script src="https://sharonchoong.github.io/svg-exportJS/svg-export.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/file-saverjs@1.3.6/FileSaver.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jszip@3.10.1/dist/jszip.min.js"></script>
    <script src="lishizhanpai.js"></script>
    <style>
        textarea {
            resize: none;
            min-height: 200px;
            max-height: 200px;
        }
        .youduiqi {
            text-align: right;
        }
    </style>
</head>
<body>
    <h1>商弦公交立式站牌生成器</h1>
    <a href="..">◀ 返回上层</a>
    <p>
        <details>
            <summary class="label">查看说明</summary>
            <div class="card lab">
                <ul>
                    <li>本生成器及生成的立式站牌和站名铁牌均由臤徘斯（Kinboise）原创，为<u>商弦</u>公交设计。</li>
                    <li><b>本设计使用的字体：</b>思源宋体、Zilla Slab、未来荧黑、Bahnschrift、MiSans、Unifont、Minecraft字体。设备上未安装则显示浏览器的默认字体。</li>
                    <li><b>左/右箭头：</b>站名铁牌上指示行进方向的红箭头。<b>f</b>表示<b>右</b>，<b>t</b>表示<b>左</b>。</li>
                    <li><b>车头方向：</b>指示公交车在此站停靠时的前进方向。默认是<u>帜和</u>语方向词：北F、东R、南P、西K；也可以在下面把方向词设为<u>英</u>语的NESW或自定义一组。若勾选<b>方向词单列</b>则方向词写在<b>车头方向</b>一列，取消勾选则写在车站中文名之后（如「铛钱砗战F」）。</li>
                    <li><b>站名列表：</b>按顺序每行一站，注意汉字和拉丁字母站名一一对应。拉丁站名如需换行的，立式站牌换行用_表示，站名铁牌换行用;表示。</li>
                </ul>
            </div>
        </details>
    </p>
    <div class="label">线路信息</div>
    <div class="card lab">
    <form name="xinxi">
        <figure>
            <table style="margin:0 auto">
                <tr>
                    <th colspan="3">路号</th>
                </tr>
                <tr>
                    <td colspan="3" style="text-align:center"><input name="luhao" value="0+" style="max-width:2em"></td>
                </tr>
                <tr>
                    <th colspan="3">方向词</th>
                </tr>
                <tr>
                    <td colspan="3" style="text-align:center">
                        <input type="radio" name="yuyan" checked value="zhiheyu">
                        <label>帜和语方向词(FRPK)</label><br>
                        <input type="radio" name="yuyan" value="yingyu">
                        <label>英语方向词(NESW)</label><br>
                        <input type="radio" name="yuyan" value="zidingyi">
                        <label>自定义</label>
                        <input name="fangxiangci" maxlength="4" style="width:4em" value="BDNX" onchange="zidingyiyuyan()"><br>
                        <input type="checkbox" name="fangxiangdanlie" checked onchange="fxcdl()" value="1">
                        <label>方向词单列</label><br>
                    </td>
                </tr>
            </table><table style="margin:0 auto">
                <tr>
                    <th>左/右箭头</th>
                    <th id="czfx1">车头方向</th>
                    <th>车站列表（汉字）</th>
                    <th>车站列表（拉丁）</th>
                </tr>
                <tr>
                    <td style="text-align:center">
                        <textarea name="jiantou" style="width:2em">f
t
t
f
f</textarea>
                    </td>
                    <td id="czfx2" style="text-align:center">
                        <textarea name="fangxiang" style="width:2em">F
R
P
K
F</textarea>
                    </td>
                    <td>
                        <textarea id="chezhanliebiao" name="chezhanliebiao">铛钱砗战
夏怡做伡占
地叁绽
在吓移工胶蘸
钟典栈</textarea>
                    </td>
                    <td>
                        <textarea name="chezhanliebiaolat">Zangicimice;_-gogikihilafume
Johikajgu;kumipi
Divikoflori
Uglokivogi;radinira
Zangumi;gorumone</textarea>
                    </td>
                </tr>
                </table><table style="margin:0 auto">
                <tr>
                    <th>底部提示</th>
                </tr>
                <tr>
                    <td style="text-align:center">
                        <input name="dibutishi1" value="详情咨询站务员"></textarea><br>
                        <input name="dibutishi2" value="或执行/gj命令"></textarea><br>
                    </td>
                </tr>
    </table>
</figure>
    </form>
    </div>
    <p>
        <div class="label">格式设置</div>
        <div class="card lab">
            <form name="geshi">
                <figure>
                    <table style="margin:0 auto">
                        <tr>
                            <td class="youduiqi">背景色</td>
                            <td>
                                <input type="color" name="dise" value="#ffffff">
                            </td>
                        </tr>
                        <tr>
                            <td class="youduiqi">顶部底部背景色</td>
                            <td>
                                <input type="color" name="biaotise" value="#006837">
                            </td>
                        </tr>
                        <tr>
                            <td class="youduiqi">路号背景色</td>
                            <td>
                                <input type="color" name="luhaose" value="#c1272d">
                            </td>
                        </tr>
                    </table>
                </figure>
            </form>
        </div>
    </p>
    <button onclick="yulan()" id="shengcheng">生成</button>
<p>
    <div id="yulanqu" hidden>
        <div class="label">站牌预览</div>
        <div class="card lab gridc" style="text-align:center">
            <span id="zhanpaiyulan"></span>
            <span id="tiepaiyulan"></span>
        </div>
        <div>
            <button onclick="shangyizhang()" id="shangyizhang">上一站</button>
            <button onclick="xiayizhang()" id="xiayizhang">下一站</button>
            <button onclick="xiazaidanzhang()">下载本站png</button>
            <button onclick="xiazaidanzhangsvg()">下载本站svg（仅支持立式）</button>
            <button onclick="xiazaiquanbu()">下载全部png</button>
            <button onclick="xiazaiquanbusvg()">下载全部svg（仅支持立式）</button>
        </div>
    </div>
</p>
</body>

</html>